<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .masking{
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: rgba(0,0 ,0 ,0.5);
          display: none;
      }
     .panel{
        width: 300px;
      height: 200px;
      background: #fff;
      position: absolute;
      top: 50%;
      margin-left: -150px;
      margin-top: -100px;
      left: -100%;
     }
    
    </style>
</head>
<body>
    <a href="javascript:;" data-show="denglu">登录</a>
    <a href="javascript:;" data-show="zhuce">注册</a>
    <div class="masking">
        <div class="panel" id="denglu">
            <a href="javascript:;" class="close">关闭</a>
        </div>
        <div class="panel" id="zhuce">
            <a href="javascript:;" class="close">关闭</a>
        </div>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        (function ($){
            $(function(){
             $("[data-show]").click(function(){
                 var id = $(this).data("show");
                 $(".masking").fadeIn(function(){
                  $("#" + id).animate({
                      left:"50%"
                  })
                 })
             })
             $(".close").click(function(){
                 $parent=$(this).parent();
                 $parent.animate({
                    left:'150%'
                 },function(){
                   
                 $('this').css('left','-100%')
                 $(".masking").fadeOut()
            })
             })
            })
        })(jQuery)
    
    
    
    
    
    </script>
</body>
</html>